<template>
	<div>
		<h1 class="YaHei" style="text-align:center;font-size:16px;font-family:&quot;color:#333333;background-color:#FFFFFF;">
	<span style="font-size:18px;">js闭包的用途详解</span>
</h1>
<p>
	<br />
</p>
<p>
	<span style="font-size:18px;"></span>
</p>
<p>
	&nbsp;&nbsp;&nbsp;&nbsp;js闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。具体怎么理解呢，各<span style="background-color:#F6FBFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;"></span><span style="background-color:#F6FBFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;">位看官请仔细看好下文</span> 
</p>
<p>
	<span style="color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;background-color:#F6FBFF;"><br />
</span> 
</p>
<p style="text-align:left;">
	<span style="color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;background-color:#F6FBFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">&nbsp;&nbsp;&nbsp;&nbsp;我们来看看闭包的用<span style="background-color:#337FE5;"></span>途。事实上，通过使用闭包，我们可以做很多事情。比如模拟面向对象的代码风格；更优雅，更简洁的表达出代码；在某些方面提升代码的执行效率。</span></span> 
</p>
<h4>
	<span style="background-color:#FFFFFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;">&nbsp; &nbsp; 1. &nbsp;匿</span><span style="background-color:#FFFFFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;">名自执行函数</span> 
</h4>
<span style="background-color:#F6FBFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;"></span><span style="background-color:#F6FBFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">我们知道所有的变量，如果不加上var关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，</span></span> 
<p>
	<br />
</p>
<p>
	<span style="background-color:#F6FBFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。</span></span> 
</p>
<p>
	<span style="background-color:#F6FBFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">除了每次使用变量都是用var关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变量无需维护，</span></span> 
</p>
<p>
	<span style="background-color:#F6FBFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">比如UI的初始化，那么我们可以使用闭包：</span></span> 
</p>
<p>
	<span style="background-color:#F6FBFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#F2F6FB;">代码如下:</span></span> 
</p>
<p>
	<span style="background-color:#F6FBFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">var datamodel = {&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;table : [],&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tree : {}&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;(function(dm){&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for(var i = 0; i &lt; dm.table.rows; i++){&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var row = dm.table.rows[i];&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for(var j = 0; j &lt; row.cells; i++){&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; drawCell(i, j);&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;</span><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;</span><br />
</strong></span> 
</p>
<p>
	<span style="background-color:#F6FBFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;"><strong><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;})(datamodel); &nbsp;</span></strong></span> 
</p>
<span style="background-color:#F6FBFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;"></span> 
<p>
	<br />
</p>
<p>
	<span style="background-color:#F6FBFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;"><strong><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">我们创建了一个匿名的函数，并立即执行它，由于外部无法引用它内部的变量，</span><br />
</strong></span> 
</p>
<p>
	<span style="background-color:#F6FBFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;"><strong><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">因此在执行完后很快就会被释放，关键是这种机制不会污染全局对象。</span><br />
</strong></span> 
</p>
<p>
	<span style="background-color:#F6FBFF;color:#333333;font-family:tahoma, arial, 宋体;font-size:14px;"><strong><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;"><br />
</span></strong></span> 
</p>
<h4>
	<strong><span style="background-color:#FFFFFF;">2.缓存</span></strong> 
</h4>
<p>
	<strong><span style="background-color:#FFFFFF;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">再来看一个例子，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，</span></span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">&nbsp;&nbsp;&nbsp;&nbsp;那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，</span><br />
</span></strong> 
</p>
<p style="text-align:justify;">
	<strong><span style="background-color:#FFFFFF;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">然后更新缓存并返回值，如果找到了，直接<span style="font-size:9px;"><span style="font-size:12px;"></span></span>返回查找到的值即可。闭包正是可以做到这一点，因为它不会释放外部的引用，</span></span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">&nbsp;&nbsp;&nbsp;&nbsp;从而函数内部的值可以得以保留。</span></span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#F2F6FB;">代码如下:</span><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;">&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">var CachedSearchBox = (function(){&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp; var cache = {},&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; count = [];&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp; return {&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; attachSearchBox : function(dsid){&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(dsid in cache){//如果结果在缓存中&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return cache[dsid];//直接返回缓存中的对象&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var fsb = new uikit.webctrl.SearchBox(dsid);//新建&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cache[dsid] = fsb;//更新缓存&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(count.length &gt; 100){//保正缓存的大小&lt;=100&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; delete cache[count.shift()];&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return fsb;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; clearSearchBox : function(dsid){&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(dsid in cache){&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; cache[dsid].clearSelection();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp; };&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">})();&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">CachedSearchBox.attachSearchBox("input1");&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">这样，当我们第二次调用CachedSearchBox.attachSerachBox(“input1”)的时候，</span></span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">我们就可以从缓存中取道该对象，而不用再去创建一个新的searchbox对象。</span></span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">3. 实现封装</span><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">可以先来看一个关于封装的例子，在person之外的地方无法访问其内部的变量，而通过提供闭包的形式来访问：</span></span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#F2F6FB;">代码如下:</span></span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">var person = function(){&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp; //变量作用域为函数内部，外部无法访问&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp; var name = "default";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp; return {&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; getName : function(){&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return name;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; setName : function(newName){&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name = newName;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">}();&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">print(person.name);//直接访问，结果为undefined&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">print(person.getName());&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">person.setName("abruzzi");&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">print(person.getName());&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">得到结果如下：&nbsp;&nbsp;</span></span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">undefined&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">default&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">abruzzi&nbsp;&nbsp;</span></span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">4 闭包的另一个重要用途是实现面向对象中的对象，传统的对象语言都提供类的模板机制，</span></span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">这样不同的对象(类的实例)拥有独立的成员及状态，互不干涉。虽然JavaScript中没有类这样的机制，但是通过使用闭包，</span></span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">我们可以模拟出这样的机制。还是以上边的例子来讲：</span></span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#F2F6FB;">代码如下:</span></span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">function Person(){&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp; var name = "default";&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp; return {&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; getName : function(){&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return name;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; },&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; setName : function(newName){&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; name = newName;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">};&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">var john = Person();&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">print(john.getName());&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">john.setName("john");&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">print(john.getName());&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">var jack = Person();&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">print(jack.getName());&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">jack.setName("jack");&nbsp;&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#DDEDFB;">print(jack.getName()); &nbsp;&nbsp;</span><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">运行结果如下：&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">&nbsp;&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">&nbsp;&nbsp;&nbsp;&nbsp;default&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">&nbsp;&nbsp;&nbsp;&nbsp;john&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">&nbsp;&nbsp;&nbsp;&nbsp;default&nbsp;&nbsp;</span><br />
<span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">&nbsp;&nbsp;&nbsp;&nbsp;jack&nbsp;&nbsp;</span></span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">由此代码可知，john和jack都可以称为是Person这个类的实例，因为这两个实例对name这个成员的访问是独立的，互不影响的。</span></span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><br />
</span></strong> 
</p>
<p>
	<strong><span style="background-color:#FFFFFF;"><span style="font-family:tahoma, arial, 宋体;font-size:14px;background-color:#FFFFFF;">以上便是js闭包的作用了，非常简单易懂吧，希望对小伙伴们有所帮助</span><br />
</span></strong> 
</p>
	</div>
</template>
<script>
export default{}
</script>

<style>

</style>